{% extends "base.html" %}
{% load i18n %}
<body>
{% block menu %}
    <li><a href="/">{% trans 'Home' %}</a></li>
    <li><a href="/case/search/">{% trans 'Case Query' %}</a></li>
    <li class="cur"><a href="/case/add/">{% trans 'Add Case' %}</a></li>
    <li><a href="/case/category/">{% trans 'Category' %}</a></li>
    <li><a href="/contact/">{% trans 'Contact Us' %}</a></li>
{% endblock %}
{% block detail %}

    <div class="main">
        <div class="addWrap">
            <h2><span><b>{% trans 'Add Case' %}</b><em>(<i>*</i>{% trans 'is required' %})</em></span></h2>

            {% if caseId %}
                <form action="/editcase/" method="post" enctype="multipart/form-data">{% csrf_token %}
                <input type="hidden" name="caseId" value="{{ caseId }}"
            {% else %}
                <form action="/case/edit/" method="post" enctype="multipart/form-data">{% csrf_token %}
            {% endif %}

            <dl>
                <dt><i>*</i>{% trans 'Name' %}：</dt>
                <dd>{{ form.name }}
                    {% if form.errors.name %}
                        <span class="note">{{ form.errors.name }}</span>
                    {% endif %}
                </dd>
            </dl>
            <dl>
                <dt>{% trans 'Author' %}：</dt>
                <dd>{{ form.author }}
                    {% if form.errors.author %}
                        <span class="note">{{ form.errors.author }}</span>
                    {% endif %}
                </dd>
            </dl>
            <dl>
                <dt>{% trans 'Company' %}：</dt>
                <dd>{{ form.company }}</dd>
            </dl>
            <dl>
                <dt><i>*</i>{% trans 'Category' %}：</dt>
                <dd>{{ form.category }}
                    {% if form.errors.category %}
                        <span class="note">{{ form.errors.category }}</span>
                    {% endif %}
                </dd>
            </dl>
            <dl>
                <dt><i>*</i>{% trans 'Scale of company' %}：</dt>
                <dd>{{ form.company_scale }}
                    {% if form.errors.company_scale %}
                        <span class="note">{{ form.errors.company_scale }}</span>
                    {% endif %}
                </dd>
            </dl>
            <dl>
                <dt><i>*</i>{% trans 'Staff quantity' %}：</dt>
                <dd>{{ form.employee_scale }}
                    {% if form.errors.employee_scale %}
                        <span class="note">{{ form.errors.employee_scale }}</span>
                    {% endif %}
                </dd>
            </dl>
            <dl>
                <dt>{% trans 'Country' %}：</dt>
                <dd>{{ form.country }}</dd>
                <dt>{% trans 'Province' %}：</dt>
                <dd>{{ form.province }}</dd>
                <dt>{% trans 'City' %}：</dt>
                <dd>{{ form.city }}</dd>
            </dl>
            <dl>
                <dt><i>*</i>{% trans 'Ownership' %}：</dt>
                <dd>{{ form.ownership }}
                    {% if form.errors.ownership %}
                        <span class="note">{{ form.errors.ownership }}</span>
                    {% endif %}
                </dd>
            </dl>
            <dl>
                <dt><i>*</i>{% trans 'Industry' %}：</dt>
                <dd>{{ form.industry }}
                    {% if form.errors.industry %}
                        <span class="note">{{ form.errors.industry }}</span>
                    {% endif %}
                </dd>
            </dl>
            <dl>
                <dt><i>*</i>{% trans 'Department' %}：</dt>
                <dd>{{ form.department }}
                    {% if form.errors.department %}
                        <span class="note">{{ form.errors.department }}</span>
                    {% endif %}
                </dd>
            </dl>
            <dl>
                <dt><i>*</i>{% trans 'Abstract' %}：</dt>
                <dd>{{ form.brief }}
                    {% if form.errors.brief %}
                        <span class="note">{{ form.errors.brief }}</span>
                    {% endif %}
                </dd>
            </dl>
            <dl>
                <dt><i>*</i>{% trans 'Keywords' %}：</dt>
                <dd>{{ form.keywords }} {% trans '(Separated by ",")' %}
                    {% if form.errors.keywords %}
                        <span class="note">{{ form.errors.keywords }}</span>
                    {% endif %}
                </dd>
            </dl>
            <dl>
                <dt>{% trans 'Cover' %}：</dt>
                <dd class="psr">
                    <input type="text" id="viewfile" class="fileTxt"/>
                    <input type="button" class="fileBtn" value="{% trans 'choose file' %}"/>
                    <input type="file" name="img" onchange="document.getElementById('viewfile').value=this.value;"
                           class="file"/>
                </dd>
            </dl>
            <dl>
                <dt><i>*</i>{% trans 'Description' %}：</dt>
                <dd>
                    {{ form.description }}
                    {% if form.errors.description %}
                        <span class="note">{{ form.errors.description }}</span>
                    {% endif %}
                </dd>
            </dl>
            <input type="submit" value="{% trans 'Submit' %}" class="btn"/>
            </form>
        </div>
    </div>
{% endblock %}
{% block js %}
    <script type="text/javascript" src="/assets/js/ckeditor/ckeditor.js"></script>
    <script type="text/javascript">
        function getProvinceSelectList(id, lang) {
            if (null != id && '' != id) {
                $.ajax({
                    type: 'GET',
                    url: "/province/list/?id=" + id + "&lang=" + lang + "&i=" + Math.random(),
                    dataType: 'json',
                    success: function (data) {
                        $("#id_province").empty();
                        var provSelect = document.getElementById('id_province');
                        if (data.length > 0) {
                            for (var i = 0; i < data.length; i++) {
                                provSelect.options[i] = new Option();
                                provSelect.options[i].text = data[i].text;
                                provSelect.options[i].value = data[i].label;
                            }
                        }
                        getCitySelectList($("#id_province").val(), lang);
                    }
                })
            } else {
                $("#id_province").empty();
                $("#id_city").empty();
            }
        }
        function getCitySelectList(id, lang) {
            if (null != id && '' != id) {
                $.ajax({
                    type: 'GET',
                    url: "/province/city/list/?id=" + id + "&lang=" + lang + "&i=" + Math.random(),
                    dataType: 'json',
                    success: function (data) {
                        $("#id_city").empty();
                        var citySelect = document.getElementById('id_city');
                        if (data.length > 0) {
                            for (var i = 0; i < data.length; i++) {
                                citySelect.options[i] = new Option();
                                citySelect.options[i].text = data[i].text;
                                citySelect.options[i].value = data[i].label;
                            }
                        }
                    }
                })
            } else {
                $("#id_city").empty();
            }
        }
        $(function () {
            getProvinceSelectList($("#id_country").val(), '{{ LANGUAGE_CODE }}');
            var ck = CKEDITOR.replace('description', {width: 600, height: 300, customConfig: '/assets/js/ckeditor/config.js',
                filebrowserImageUploadUrl: '/upload_script/'});
            //var briefCk = CKEDITOR.replace('brief', {width: 700, height: 300});

        })

    </script>
{% endblock %}
</body>
</html>